<div class="nv-dialog">
  <div class="d-flex align-items-center justify-content-between">
    <h4 mat-dialog-title class="mb-1">
      {{
        (type === 'add' ? 'service.ADD_RULE' : 'service.EDIT_RULE') | translate
      }}
    </h4>
    <div class="d-flex align-items-center justify-content-center mb-1">
      <button
        mat-icon-button
        aria-label="close"
      >
        <i class="eos-icons" (click)="onCancel()">close</i>
      </button>
    </div>
  </div>
  <hr class="fancy" />
  <div>
    <form [formGroup]="processProfileRuleForm" class="">
      <div class="d-flex justify-content-start align-content-center pl-2">
        <mat-form-field appearance="fill" class="flex-grow-1">
          <mat-label>{{ 'group.GROUP' | translate }}</mat-label>
          <mat-select matNativeControl required formControlName="group">
            <mat-option
              *ngFor="let groupOption of groupOptions"
              [value]="groupOption"
              >{{ groupOption }}</mat-option
            >
          </mat-select>
          <mat-error>Group is required!</mat-error>
        </mat-form-field>
      </div>
      <div class="d-flex justify-content-start align-content-center pl-2">
        <mat-form-field appearance="standard" class="pr-4 flex-grow-1">
          <mat-label>{{ 'service.gridHeader.NAME' | translate }}</mat-label>
          <input
            matInput
            name="name"
            [readonly]="type === 'edit'"
            formControlName="name"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
            required />
          <mat-error>Rule name is required!</mat-error>
        </mat-form-field>
        <mat-form-field appearance="standard" class="flex-grow-1">
          <mat-label>{{ 'service.gridHeader.PATH' | translate }}</mat-label>
          <input
            matInput
            name="path"
            formControlName="path"
            [attr.maxlength]="'general.FILTER_MAX_LEN' | translate"
          />
        </mat-form-field>
        <div class="mt-4">
          <span class="nv-modal-item-title mr-2">{{
            'service.ALLOW_ALERT' | translate
          }}</span>
          <mat-slide-toggle
            id="network-action-toggle"
            [(ngModel)]="isAllowed"
            [ngModelOptions]="{ standalone: true }"
            color="primary">
            <span
              [ngClass]="{
                'text-deny': !isAllowed,
                'text-success': isAllowed
              }">
              {{
                (isAllowed ? 'policy.action.ALLOW' : 'policy.action.DENY')
                  | translate
              }}
            </span>
          </mat-slide-toggle>
        </div>
      </div>
      <div>
        <div class="text-info">
          <em class="eos-icons icon-18 mr-2">info</em>{{ 'general.SAMPLE'| translate }}
        </div>
        <div class="p-2 text-muted">
          <table>
            <tr class="sample-table-header">
              <th class="sample-table-border column-1">{{'service.gridHeader.NAME' | translate }}</th>
              <th class="sample-table-border column-2">{{'service.gridHeader.PATH' | translate }}</th>
              <th class="sample-table-border column-3">{{'policy.addPolicy.COMMENT' | translate }}</th>
            </tr>
            <tr>
              <td class="sample-table-border column-1">cat</td>
              <td class="sample-table-border column-2">* or empty</td>
              <td class="sample-table-border column-3">"cat" in any path</td>
            </tr>
            <tr>
              <td class="sample-table-border column-1">cat</td>
              <td class="sample-table-border column-2">/bin/cat</td>
              <td class="sample-table-border column-3">"cat" in a specific path</td>
            </tr>
            <tr>
              <td class="sample-table-border column-1">cat</td>
              <td class="sample-table-border column-2">/bin/*</td>
              <td class="sample-table-border column-3">"cat" under a specific path</td>
            </tr>
            <tr>
              <td class="sample-table-border column-1">*</td>
              <td class="sample-table-border column-2">*</td>
              <td class="sample-table-border column-3">a special rule for allowing all binary to run ( not for deny rules)</td>
            </tr>
          </table>
          <div class="text-bold">
            A single wildcard must be at the end
          </div>
        </div>
      </div>
    </form>
  </div>
  <div
    mat-dialog-actions
    class="d-flex justify-content-end align-content-center">
    <button
      mat-stroked-button
      class="mr-2"
      aria-label="cancel"
      (click)="onCancel()">
      {{ 'group.editGroup.CANCEL' | translate }}
    </button>
    <button
      mat-raised-button
      aria-label="deploy"
      color="primary"
      [disabled]="processProfileRuleForm.invalid"
      (click)="addEditProcessProfileRule()">
      {{ 'policy.portlet.SUBMIT' | translate }}
    </button>
  </div>
</div>
